<template>
	<!-- 搜索 -->
	<view class="search" :class="{ focused: focused }">
		<!-- 搜索框 -->
		<view class="input-wrap" @click="goSearch">
			<!-- 用户点击手机键盘搜索键或者电脑的回车键 @confirm -->
			<input
				@confirm="searchHistory"
				@input="searchValue"
				class="input"
				v-model="query"
				type="text"
				:placeholder="placeholder"
			/>
			<span class="cancle" @click.stop="cancleSearch">取消</span>
		</view>
		<!-- 搜索结果 -->
		<view class="content">
			<view class="title">
				搜索历史
				<text @click="removehistory" class="clear"></text>
			</view>
			<view class="history">
				<navigator
					:key="item"
					v-for="item in historyList"
					class="navigator"
					:url="`/subpkg/pages/list/index?query=${item}`"
				>
					{{ item }}
				</navigator>
			</view>
			<!-- 结果 -->
			<scroll-view v-if="searchList.length" scroll-y class="result">
				<navigator
					:key="item.goods_id"
					v-for="item in searchList"
					class="navigator"
					:url="`/subpkg/pages/goods/index?id=${item.goods_id}`"
				>
					{{ item.goods_name }}
				</navigator>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			focused: false,
			placeholder: '',
			//用户输入的内容
			query: '',
			//搜索列表
			searchList: [],
			//搜索历史列表，初始值从本地中读取
			historyList: uni.getStorageSync('history') || []
		};
	},
	onLoad() {
		//调用搜索接口
		this.searchValue();
	},
	methods: {
		removehistory() {
			//清除本地存储记录
			uni.removeStorageSync('history');
			//清除搜索历史列表
			this.historyList = [];
		},
		searchHistory() {
			console.log(this.query);
			// 如果有重复搜索的关键字，不再重复记录
			if (this.historyList.includes(this.query)) return;
			// 将搜索的内容记录到数组中
			this.historyList.push(this.query);
			// console.log(this.historyList);
			// 把搜索历史存入到本地
			uni.setStorageSync('history', this.historyList);
		},
		//监听用户输入事件
		async searchValue() {
			// console.log(this.query);
			const { data: res } = await uni.$http.get('/api/public/v1/goods/qsearch', {
				query: this.query
			});
			//判断数据是否获取成功
			if (res.meta.status !== 200) {
				return uni.showToast({
					title: '数据加载失败!',
					duration: 1500,
					icon: 'none'
				});
			}
			console.log(res);
			//更新数据列表，渲染页面
			this.searchList = res.message;
		},
		goSearch(ev) {
			this.focused = true;
			this.placeholder = '请输入您要搜索的内容';

			// 触发父组件自定义事件
			this.$emit('search', {
				//得到系统信息窗口高度
				pageHeight: uni.getSystemInfoSync().windowHeight + 'px'
			});

			// 隐藏tabBar
			uni.hideTabBar();
		},
		cancleSearch() {
			//页面不显示
			this.focused = false;
			//清空用户输入的信息
			this.placeholder = '';
			//清空输入内容和输入历史列表
			this.query = '';
			this.searchList = [];
			// 触发父组件自定义事件
			this.$emit('search', {
				pageHeight: 'auto'
			});

			// 显示tabBar
			uni.showTabBar();
		}
	}
};
</script>

<style lang="scss" scoped>
.search {
	display: flex;
	flex-direction: column;

	// 搜索框
	.input-wrap {
		display: flex;
		height: 100rpx;
		padding: 20rpx 30rpx;
		background-color: #ea4451;
		box-sizing: border-box;
		position: relative;

		&::before,
		&::after {
			height: 44rpx;
			line-height: 1;
			background-image: url(http://static.botue.com/ugo/images/icon_search%402x.png);
			background-size: 32rpx;
			background-position: 6rpx center;
			background-repeat: no-repeat;

			position: absolute;
			top: 28rpx;
			z-index: 9;
		}

		&::before {
			content: '搜索';
			display: block;

			width: 100rpx;
			padding: 11rpx 0 10rpx 44rpx;
			box-sizing: border-box;
			color: #666;
			font-size: 24rpx;
			left: 325rpx;
		}

		&::after {
			display: none;
			content: '';
			width: 44rpx;
			left: 40rpx;
		}

		.input {
			flex: 1;
			height: 60rpx;
			padding: 0 20rpx 0 64rpx;
			background-color: #fff;
			border-radius: 8rpx;
			font-size: 24rpx;
			color: #666;
		}

		span.cancle {
			display: none;
			width: 80rpx;
			text-align: right;
			line-height: 60rpx;
			font-size: 27rpx;
			color: #666;
		}
	}

	// 搜索结果
	.content {
		display: none;
		flex: 1;
		padding: 27rpx;
		background-color: #fff;
		position: relative;

		.title {
			font-size: 27rpx;
			line-height: 1;
			color: #333;
		}

		.clear {
			display: block;
			width: 27rpx;
			height: 27rpx;
			float: right;
			background-image: url(http://static.botue.com/ugo/images/clear.png);
			background-size: cover;
		}

		.history {
			padding-top: 30rpx;

			.navigator {
				display: inline-block;
				line-height: 1;
				padding: 15rpx 20rpx 12rpx;
				background-color: #ddd;
				font-size: 24rpx;
				margin-right: 20rpx;
				margin-bottom: 15rpx;
				color: #333;
			}
		}

		.result {
			// display: none;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background-color: #fff;

			.navigator {
				line-height: 1;
				padding: 20rpx 30rpx;
				font-size: 24rpx;
				color: #666;
				border-bottom: 1px solid #eee;

				&:last-child {
					border-bottom: none;
				}
			}
		}
	}

	// 获得焦点状态
	&.focused {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 9;

		.input-wrap {
			background-color: #eee;

			&::before {
				display: none;
			}

			&::after {
				display: block;
			}
		}

		span.cancle {
			display: block;
		}

		.content {
			display: block;
		}
	}
}
</style>
